<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>

		<div id="box"></div>
		<p id="pp" class="p sp box">111</p>
		<script type="text/javascript">
			//通过ajax获取json数据
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "city.json", true);
			xhr.send();
			xhr.onreadystatechange = function() {
				//请求成功进行数据解析及遍历
				if(xhr.status == 200 && xhr.readyState == 4) {
					var jsons = xhr.responseText;
					
					var cityList = JSON.parse(jsons);
					var changeCity; //为获取选中省的下级市.县提供参考依据
					//设置省
					//动态创建创建省、市、区下拉框并添加到box中
					var province = document.createElement("select");
					var city = document.createElement("select");
					var areas = document.createElement("select");
					//将创建的下拉框添加到box盒子中
					box.appendChild(province);
					box.appendChild(city);
					box.appendChild(areas);
					//为省下拉框添加默认请选择选项
					province.innerHTML = "<option value='-1'>请选择</option>";
					//循环JSON对象，将第一层的名称赋值给省
					for(var i = 0; i < cityList.length; i++) {
						province.innerHTML += "<option value=" + i + ">" + cityList[i].name + "</option>";
					}
					//省下拉框改变事件
					province.onchange = function() {
						
						
						//  this.value====> 获取省选择的value ,作为参考点
						// 为市、区添加默认请选择选项
						city.innerHTML = "<option value='-1'>请选择</option>";
						areas.innerHTML = "<option value='-1'>请选择</option>";
						//获取json数据第一层数据的children 并赋值给全局变量 changeCity，便于city.onchange事件调用
						changeCity = cityList[this.value].children;
						//循环第一层选中数据的children，并将里面每项中的name赋值给city的option并添加相应value
						for(var i = 0; i < changeCity.length; i++) {
							city.innerHTML += "<option value=" + i + ">" + changeCity[i].name + "</option>";
						}
					}
					//市下拉框改变事件
					city.onchange = function() {
						//为县级下拉框设置默认请选择选项
						areas.innerHTML = "<option value='-1'>请选择</option>";
						//循环第一层选中项的children中选中项的children，并将每项中的name赋值给areas的option并设置value
						for(var i = 0; i < changeCity[this.value].children.length; i++) {
							areas.innerHTML += "<option value='" + i + "'>" + changeCity[this.value].children[i].name + "</option>";
						}
					}
				}
			}

			//判断类名是否存在
			var pp = document.getElementById("pp");

			console.log(hasClass(pp, "box"));

			function hasClass(obj, cls) {
				//判断传入的是否为dom对象
				if(obj.nodeType) {
					var classNames = obj.className;
					//正则
					 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
					 if(reg.test(classNames)){
					 	return true;
					 }
					 return false;
					//数组方式
//					var classList = classNames.split(/\s+/);
//					for(var i in classList) {
//						if(classList[i] == cls) {
//							return true;
//						}
//					}
//					return false;
				} else {
					alert("请传入dom对象")
				}
			}
		</script>
	</body>

</html>